import React from 'react';
import QRCode from 'qrcode.react';
import { WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
class E9QRCode extends React.Component {
    constructor(props) {
        super(props);
        this.getQRCode = this.getQRCode.bind(this);
        this.scanQRCode = this.scanQRCode.bind(this);
    }

    componentDidMount() {
        const { getLoginForm, datas={} } = this.props;
        const {cacheAccount:loginId, langId} = datas;
        this.getQRCode();
    }

    componentDidUpdate() {
        this.getQRCode();
    }

    componentWillUnmount() {
        window.clearInterval(this.scanInterval);
    }

    render() {
        const { datas = {}} = this.props;
        const {loginSettingInfo = {}, qrCode} = datas;
        const {loginForm = {}} = loginSettingInfo;

        const size = this.props.size || 180;
        const color = this.props.color || loginForm.color || '#fff';

        return (
            <div className="login-QRCode">
                <div className="login-QRCode-area">
                    {!!qrCode ? <QRCode ecId={`${this && this.props && this.props.ecId || ''}_QRCode@4l98rr`} value={qrCode.text} size={size} fgColor="#404549" bgColor="#eaeaea"/> : ''}
                </div>
                <div className="login-QRCode-describe">{getLabel(84272, '请使用e-mobile扫描二维码以登录')}</div>
            </div>
        );
    }

    getQRCode() {
        const { datas={} } = this.props;
        const {qrCode} = datas;
        if (!!qrCode) {
            window.clearInterval(this.scanInterval);
            this.scanInterval = window.setInterval(this.scanQRCode.bind(this), 1000);
        }
    }

    scanQRCode() {
        const {onQCLogin} = this.props;
        onQCLogin();
    }
}

export default E9QRCode;